<script lang="ts" setup>
import {
  getOneByCondition,
  getReadonly,
  insertOne,
  reSetDialogModel,
  updateOne,
  urls,
  validateRepeat
} from '@/index';

import type { DialogModel, PtTechnique } from '@/index.d';
import type { FormInstance, FormRules } from 'element-plus';

const dialogModel = defineModel<DialogModel<PtTechnique>>('dialogModel', {
  required: true
});

const { insertForbidden, updateForbidden } = getReadonly(dialogModel.value);

const formData = reactive<PtTechnique>({
  id: 0,
  penetrationColor: '着色',
  cleanMethod: '溶剂去除法',
  temperatureDown: -9999,
  temperatureUp: 9999,
  illuminanceForWhiteDown: -9999,
  illuminanceForWhiteUp: 9999,
  illuminanceForBlackDown: -9999,
  illuminanceForBlackUp: 9999,
  preCleanDryTimeDown: -9999,
  preCleanDryTimeUp: 9999,
  penetrationTimeDown: -9999,
  penetrationTimeUp: 9999,
  postCleanDryTimeDown: -9999,
  postCleanDryTimeUp: 9999,
  developerTimeDown: -9999,
  developerTimeUp: 9999
});

const setFormData = async (res: PtTechnique) => {
  formData.id = res.id;
  formData.creator = res.creator;
  formData.createTime = res.createTime;
  formData.updater = res.updater;
  formData.updateTime = res.updateTime;
  formData.projectId = res.projectId;
  formData.penetrationColor = res.penetrationColor;
  formData.cleanMethod = res.cleanMethod;
  formData.extentName = res.extentName;
  formData.fullName = res.fullName;
  formData.temperatureDown = res.temperatureDown;
  formData.temperatureUp = res.temperatureUp;
  formData.illuminanceForWhiteDown = res.illuminanceForWhiteDown;
  formData.illuminanceForWhiteUp = res.illuminanceForWhiteUp;
  formData.illuminanceForBlackDown = res.illuminanceForBlackDown;
  formData.illuminanceForBlackUp = res.illuminanceForBlackUp;
  formData.preCleanDryTimeDown = res.preCleanDryTimeDown;
  formData.preCleanDryTimeUp = res.preCleanDryTimeUp;
  formData.penetrationTimeDown = res.penetrationTimeDown;
  formData.penetrationTimeUp = res.penetrationTimeUp;
  formData.postCleanDryTimeDown = res.postCleanDryTimeDown;
  formData.postCleanDryTimeUp = res.postCleanDryTimeUp;
  formData.developerTimeDown = res.developerTimeDown;
  formData.developerTimeUp = res.developerTimeUp;
  formData.materialBrandName = res.materialBrandName;
  formData.penetrateMaterialName = res.penetrateMaterialName;
  formData.cleanMaterialName = res.cleanMaterialName;
  formData.developMaterialName = res.developMaterialName;
  formData.sensitivityBlock = res.sensitivityBlock;
  formData.scope = res.scope;
};

const reSetFormData = () => {
  reSetDialogModel(dialogModel);
  formData.id = 0;
  delete formData.penetrationColor;
  delete formData.cleanMethod;
  delete formData.extentName;
  delete formData.fullName;
  delete formData.temperatureDown;
  delete formData.temperatureUp;
  delete formData.illuminanceForWhiteDown;
  delete formData.illuminanceForWhiteUp;
  delete formData.illuminanceForBlackDown;
  delete formData.illuminanceForBlackUp;
  delete formData.preCleanDryTimeDown;
  delete formData.preCleanDryTimeUp;
  delete formData.penetrationTimeDown;
  delete formData.penetrationTimeUp;
  delete formData.postCleanDryTimeDown;
  delete formData.postCleanDryTimeUp;
  delete formData.developerTimeDown;
  delete formData.developerTimeUp;
  delete formData.materialBrandName;
  delete formData.penetrateMaterialName;
  delete formData.cleanMaterialName;
  delete formData.developMaterialName;
  delete formData.sensitivityBlock;
  delete formData.scope;
};

watch(
  () => dialogModel.value.visible,
  value => {
    value && (formData.id = dialogModel.value.id as number);
    !value && reSetFormData();
  },
  {
    immediate: true
  }
);

watch(
  () => [formData.penetrationColor, formData.cleanMethod, formData.extentName],
  ([penetrationColor, cleanMethod, extentName]) =>
    (formData.fullName =
      (penetrationColor == undefined ? '' : penetrationColor) +
      (cleanMethod == undefined ? '' : cleanMethod) +
      (extentName === undefined || extentName === '' || extentName === null
        ? ''
        : '-' + extentName)),
  {
    immediate: true
  }
);

watch(
  () => formData.id,
  async (value: number | undefined) => {
    if (value) {
      const res = await getOneByCondition<PtTechnique>(urls.techniquePtTechnique, 'id', value);
      res && setFormData(res);
    }
  },
  {
    immediate: true
  }
);

const formDataRef = useTemplateRef<FormInstance>('formDataRef');

interface FormDataRules {
  penetrationColor: string;
  cleanMethod: string;
  fullName: string;
}

const validateFullName = (rule: any, value: any, callback: any) => {
  console.log(rule);

  validateRepeat(urls.techniquePtTechnique, {
    id: formData.id,
    projectId: formData.projectId,
    fullName: formData.fullName
  }).then(res => {
    if (res) {
      callback(new Error('全技术名称重复'));
    } else {
      callback();
    }
  });
};

const formDataRules = computed(() => {
  switch (dialogModel.value.type) {
    case 'view':
      return reactive({});

    case 'update':
      return reactive<FormRules<FormDataRules>>({
        penetrationColor: [{ required: true, message: '渗透剂颜色不能为空', trigger: 'blur' }],
        cleanMethod: [{ required: true, message: '清洗方法不能为空', trigger: 'blur' }],
        fullName: [{ validator: validateFullName, trigger: 'submit' }]
      });

    case 'insert':
      return reactive<FormRules<FormDataRules>>({
        penetrationColor: [{ required: true, message: '渗透剂颜色不能为空', trigger: 'blur' }],
        cleanMethod: [{ required: true, message: '清洗方法不能为空', trigger: 'blur' }],
        fullName: [{ validator: validateFullName, trigger: 'submit' }]
      });
  }
});

const saveFormData = (formEl: FormInstance | undefined) => {
  if (!formEl) return;

  formEl
    .validate()
    .then(async valid => {
      if (valid) {
        if (dialogModel.value.id === 0) {
          const res = (await insertOne<PtTechnique>(
            urls.techniquePtTechnique,
            formData
          )) as PtTechnique;
          if (res) {
            setFormData(res);
            dialogModel.value.id = res.id as number;
            dialogModel.value.type = 'update';
            dialogModel.value.change = true;
          }
        } else {
          const tempFormData: PtTechnique = {
            id: formData.id,
            projectId: formData.projectId,
            penetrationColor: formData.penetrationColor,
            cleanMethod: formData.cleanMethod,
            extentName: formData.extentName,
            fullName: formData.fullName,
            temperatureDown: formData.temperatureDown,
            temperatureUp: formData.temperatureUp,
            illuminanceForWhiteDown: formData.illuminanceForWhiteDown,
            illuminanceForWhiteUp: formData.illuminanceForWhiteUp,
            illuminanceForBlackDown: formData.illuminanceForBlackDown,
            illuminanceForBlackUp: formData.illuminanceForBlackUp,
            preCleanDryTimeDown: formData.preCleanDryTimeDown,
            preCleanDryTimeUp: formData.preCleanDryTimeUp,
            penetrationTimeDown: formData.penetrationTimeDown,
            penetrationTimeUp: formData.penetrationTimeUp,
            postCleanDryTimeDown: formData.postCleanDryTimeDown,
            postCleanDryTimeUp: formData.postCleanDryTimeUp,
            developerTimeDown: formData.developerTimeDown,
            developerTimeUp: formData.developerTimeUp,
            materialBrandName: formData.materialBrandName,
            penetrateMaterialName: formData.penetrateMaterialName,
            cleanMaterialName: formData.cleanMaterialName,
            developMaterialName: formData.developMaterialName,
            sensitivityBlock: formData.sensitivityBlock,
            scope: formData.scope
          };

          const res = (await updateOne<PtTechnique>(
            urls.techniquePtTechnique,
            tempFormData
          )) as PtTechnique;

          if (res) {
            dialogModel.value.change = true;
            formData.updater = res.updater;
            formData.updateTime = res.updateTime;
          }
        }
      }
    })
    .catch(res => console.log(res));
};
</script>
<template>
  <HqDialogDetail
    :dialog-model="dialogModel"
    @submit="saveFormData(formDataRef as FormInstance)"
    operate-record
    :operation="formData"
  >
    <template #default>
      <el-card shadow="hover">
        <template #header>基本信息</template>
        <template #default>
          <hq-form :model="formData" ref="formDataRef" :rules="formDataRules">
            <el-row :gutter="5">
              <hq-col v-show="false">
                <el-form-item label="id" prop="id">
                  <el-input v-model="formData.id" readonly />
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="项目名称" prop="projectId">
                  <el-select v-model="formData.projectId" :disabled="updateForbidden">
                    <HqProjectNameOptions />
                  </el-select>
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="全技术名称" prop="fullName">
                  <el-input v-model="formData.fullName" readonly />
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="渗透剂颜色" prop="penetrationColor">
                  <el-select v-model="formData.penetrationColor" :disabled="updateForbidden">
                    <el-option value="着色" label="着色" />
                    <el-option value="荧光" label="荧光" />
                  </el-select>
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="清洗方法" prop="cleanMethod">
                  <el-select v-model="formData.cleanMethod" :disabled="updateForbidden">
                    <el-option value="溶剂去除法" label="溶剂去除法" />
                    <el-option value="水洗法" label="水洗法" />
                  </el-select>
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="扩展技术名称" prop="extentName">
                  <el-input v-model="formData.extentName" :disabled="updateForbidden" />
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="温度要求下限" prop="temperatureDown">
                  <el-input-number
                    v-model="formData.temperatureDown"
                    :min="-9999"
                    :max="9999"
                    :step="0.1"
                    controls-position="right"
                    :disabled="updateForbidden"
                  >
                    <template #suffix>
                      <span>℃</span>
                    </template>
                  </el-input-number>
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="温度要求上限" prop="temperatureUp">
                  <el-input-number
                    v-model="formData.temperatureUp"
                    :min="-9999"
                    :max="9999"
                    :step="0.1"
                    controls-position="right"
                    :disabled="updateForbidden"
                  >
                    <template #suffix>
                      <span>℃</span>
                    </template>
                  </el-input-number>
                </el-form-item>
              </hq-col>
              <hq-col v-if="formData.penetrationColor === '着色'">
                <!-- <hq-col> -->
                <el-form-item label="白光照度下限" prop="illuminanceForWhiteDown">
                  <el-input-number
                    v-model="formData.illuminanceForWhiteDown"
                    :min="-9999"
                    :max="9999"
                    :step="1"
                    controls-position="right"
                    :disabled="updateForbidden"
                  >
                    <template #suffix>
                      <span>lx</span>
                    </template>
                  </el-input-number>
                </el-form-item>
              </hq-col>
              <hq-col v-if="formData.penetrationColor === '着色'">
                <el-form-item label="白光照度上限" prop="illuminanceForWhiteUp">
                  <el-input-number
                    v-model="formData.illuminanceForWhiteUp"
                    :min="-9999"
                    :max="9999"
                    :step="1"
                    controls-position="right"
                    :disabled="updateForbidden"
                  >
                    <template #suffix>
                      <span>lx</span>
                    </template>
                  </el-input-number>
                </el-form-item>
              </hq-col>
              <hq-col v-if="formData.penetrationColor === '荧光'">
                <el-form-item label="荧光照度下限" prop="illuminanceForWhiteDown">
                  <el-input-number
                    v-model="formData.illuminanceForBlackDown"
                    :min="-9999"
                    :max="9999"
                    :step="1"
                    controls-position="right"
                    :disabled="updateForbidden"
                  >
                    <template #suffix>
                      <span>μW/cm<sup>2</sup></span>
                    </template>
                  </el-input-number>
                </el-form-item>
              </hq-col>
              <hq-col v-if="formData.penetrationColor === '荧光'">
                <el-form-item label="荧光照度上限" prop="illuminanceForBlackUp">
                  <el-input-number
                    v-model="formData.illuminanceForBlackUp"
                    :min="-9999"
                    :max="9999"
                    :step="1"
                    controls-position="right"
                    :disabled="updateForbidden"
                  >
                    <template #suffix>
                      <span>μW/cm<sup>2</sup></span>
                    </template>
                  </el-input-number>
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="预干燥时间下限" prop="preCleanDryTimeDown">
                  <el-input-number
                    v-model="formData.preCleanDryTimeDown"
                    :min="-9999"
                    :max="9999"
                    :step="0.1"
                    controls-position="right"
                    :disabled="updateForbidden"
                  >
                    <template #suffix>
                      <span>分钟</span>
                    </template>
                  </el-input-number>
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="预干燥时间上限" prop="preCleanDryTimeUp">
                  <el-input-number
                    v-model="formData.preCleanDryTimeUp"
                    :min="-9999"
                    :max="9999"
                    :step="0.1"
                    controls-position="right"
                    :disabled="updateForbidden"
                  >
                    <template #suffix>
                      <span>分钟</span>
                    </template>
                  </el-input-number>
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="渗透时间下限" prop="penetrationTimeDown">
                  <el-input-number
                    v-model="formData.penetrationTimeDown"
                    :min="-9999"
                    :max="9999"
                    :step="0.1"
                    controls-position="right"
                    :disabled="updateForbidden"
                  >
                    <template #suffix>
                      <span>分钟</span>
                    </template>
                  </el-input-number>
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="渗透时间上限" prop="penetrationTimeUp">
                  <el-input-number
                    v-model="formData.penetrationTimeUp"
                    :min="-9999"
                    :max="9999"
                    :step="0.1"
                    controls-position="right"
                    :disabled="updateForbidden"
                  >
                    <template #suffix>
                      <span>分钟</span>
                    </template>
                  </el-input-number>
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="后干燥时间下限" prop="postCleanDryTimeDown">
                  <el-input-number
                    v-model="formData.postCleanDryTimeDown"
                    :min="-9999"
                    :max="9999"
                    :step="0.1"
                    controls-position="right"
                    :disabled="updateForbidden"
                  >
                    <template #suffix>
                      <span>分钟</span>
                    </template>
                  </el-input-number>
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="后干燥时间上限" prop="postCleanDryTimeUp">
                  <el-input-number
                    v-model="formData.postCleanDryTimeUp"
                    :min="-9999"
                    :max="9999"
                    :step="0.1"
                    controls-position="right"
                    :disabled="updateForbidden"
                  >
                    <template #suffix>
                      <span>分钟</span>
                    </template>
                  </el-input-number>
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="显像时间下限" prop="developerTimeDown">
                  <el-input-number
                    v-model="formData.developerTimeDown"
                    :min="-9999"
                    :max="9999"
                    :step="0.1"
                    controls-position="right"
                    :disabled="updateForbidden"
                  >
                    <template #suffix>
                      <span>分钟</span>
                    </template>
                  </el-input-number>
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="显像时间上限" prop="developerTimeUp">
                  <el-input-number
                    v-model="formData.developerTimeUp"
                    :min="-9999"
                    :max="9999"
                    :step="0.1"
                    controls-position="right"
                    :disabled="updateForbidden"
                  >
                    <template #suffix>
                      <span>分钟</span>
                    </template>
                  </el-input-number>
                </el-form-item>
              </hq-col>

              <hq-col>
                <el-form-item label="耗材品牌" prop="materialBrandName">
                  <el-input v-model="formData.materialBrandName" :disabled="updateForbidden" />
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="渗透剂" prop="penetrateMaterialName">
                  <el-input v-model="formData.penetrateMaterialName" :disabled="updateForbidden" />
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="清洗剂" prop="cleanMaterialName">
                  <el-input v-model="formData.cleanMaterialName" :disabled="updateForbidden" />
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="显像剂" prop="developMaterialName">
                  <el-input v-model="formData.developMaterialName" :disabled="updateForbidden" />
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="灵敏度试片" prop="lightSourceType">
                  <el-select v-model="formData.sensitivityBlock" :disabled="updateForbidden">
                    <HqDictionary type-text="渗透检测灵敏度试片" />
                  </el-select>
                </el-form-item>
              </hq-col>
            </el-row>
          </hq-form>
        </template>
      </el-card>
      <el-card shadow="hover" v-if="formData.id !== 0">
        <template #header>其它信息</template>
        <template #default>
          <hq-form :model="formData" :rules="formDataRules">
            <el-row>
              <el-form-item label="适用范围" prop="scope" style="width: 100%">
                <el-input
                  v-model="formData.scope"
                  type="textarea"
                  :autosize="{ minRows: 5 }"
                  :readonly="updateForbidden"
                />
              </el-form-item>
            </el-row>
          </hq-form>
        </template>
      </el-card>
    </template>
  </HqDialogDetail>
</template>
<style lang="scss" scoped>
sup {
  vertical-align: super;
}
</style>
